<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无缝轮播图-1</title>
    <style>
    *{margin: 0;padding: 0;}
    body{background: #dedede;}
    .box{width: 900px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;}
    .box a{position: absolute;height: 300px;left: 900px;top: 0;width: 900px;}
    .box a:nth-child(1){left: 0;}
    .btns input{background: blue;border: 1px solid red;width: 50px;height: 50px;position: absolute;z-index: 99999;top: 125px;color: #fff;line-height: 50px;}
    .btns input:nth-child(1){left: 0;}
    .btns input:nth-child(2){right: 0;}
    </style>
</head>
<body>
    <div class="box">
        <a href="#"><img src="../../css/案例/images/icen10.png"></a>
        <a href="#"><img src="../../css/案例/images/icen9.png"></a>
        <a href="#"><img src="../../css/案例/images/icen11.png"></a>
        <div class="btns">
            <input type="button" value="<<<" id="pre">
            <input type="button" value=">>>" id="next">
        </div>
    </div>
</body>
<script src="../move.js"></script>
<script>
    class Banner{
        constructor(){
            this.pre = document.getElementById("pre");
            this.next = document.getElementById("next");
            this.img = document.querySelectorAll(".box a");
            // 初始要显示的图片索引为0，那么就是0进来，length-1走
            this.index = 0;
            // 要走的图片的索引
            this.go = this.img.length-1;
            this.addEvent();
        }
        // -----------------------------------代码简化--------------------------
        addEvent(){
            var that = this;
            this.pre.onclick = function(){
                // pre计算索引
                that.changeIndex(1);
            }
            this.next.onclick = function(){
                // next计算索引
                that.changeIndex(-1);
            }
        }
        changeIndex(d){
            if(d === 1){
                if(this.index === 0){
                    //判断点击上一个的时候索引为0的话，那么就把当前显示的索引改为length-1，要走的图片索引是0；
                    this.index = this.img.length - 1;
                    this.go = 0;
                }else{
                    this.index--;
                    this.go = this.index + 1;
                }
            }else{
                // 判断点击下一个时候索引如果为最后一个，那么就直接把索引改为0，如果显示的图片为0，那么要走的图片索引就是length-1
                if(this.index === this.img.length-1){
                    this.index = 0;
                    this.go = this.img.length-1;
                }else{
                    // 索引不断增加，2显示1走，那么要走的图片的索引就是当前this.index-1
                    this.index ++;
                    this.go = this.index-1;
                }
            }
            this.setActive(d);
        }
        setActive(d){
            // console.log(this.go,this.index)
            this.img[this.go].style.left = 0;
            move(this.img[this.go],{left:this.img[0].offsetWidth * d})
        
            this.img[this.index].style.left = -this.img[0].offsetWidth * d + "px";
            move(this.img[this.index],{left:0})
        }
    }     
        new Banner();   
        // -----------------------------------代码简化--------------------------
        
        // 绑定事件
    //     addEvent(){
    //         var that = this;
    //         this.pre.onclick = function(){
    //             // pre计算索引
    //             that.changeIndexPre(1);
    //         }
    //         this.next.onclick = function(){
                
    //             // next计算索引
    //             that.changeIndexNext(-1);
    //         }
    //     }
    //     // pre计算索引
    //     changeIndexPre(){
    //         if(this.index === 0){
    //             //判断点击上一个的时候索引为0的话，那么就把当前显示的索引改为length-1，要走的图片索引是0；
    //             this.index = this.img.length - 1;
    //             this.go = 0;
    //         }else{
    //             this.index--;
    //             this.go = this.index + 1;
    //         }
    //         this.setActivePre();
    //     }
    //      // next计算索引
    //     changeIndexNext(){
    //         // 判断点击下一个时候索引如果为最后一个，那么就直接把索引改为0，如果显示的图片为0，那么要走的图片索引就是length-1
    //         if(this.index === this.img.length-1){
    //             this.index = 0;
    //             this.go = this.img.length-1;
    //         }else{
    //             // 索引不断增加，2显示1走，那么要走的图片的索引就是当前this.index-1
    //             this.index ++;
    //             this.go = this.index-1;
    //         }
    //         this.setActiveNext();
    //     }
    //     setActivePre(){
    //         // console.log(this.go,this.index)
    //         this.img[this.go].style.left = 0;
    //         move(this.img[this.go],{left:this.img[0].offsetWidth})

    //         this.img[this.index].style.left = -(this.img[0].offsetWidth) + "px";
    //         move(this.img[this.index],{left:0})
    //     }
    //     setActiveNext(){
    //         // console.log(this.go,this.index)
    //         //要走的图片的位置
    //         console.log(this.go)
    //         this.img[this.go].style.left = 0;
    //         // 初始点击，要走的图片索引是0，进来的是1,0的left是自身负offsetwidth的距离
    //         move(this.img[this.go],{left:-this.img[0].offsetWidth})

    //         // 要显示的图片的位置
    //         //初始点击，要进来的图片索引是1，出去的0,1的left是自身正是offsetwidth；
    //         this.img[this.index].style.left = (this.img[0].offsetWidth) + "px";
    //         move(this.img[this.index],{left:0})
    //     }
    // }






</script>
</html>